<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋博饼游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>中秋博饼</h1>
        
        <!-- 骰子展示区域 -->
        <div class="dice-container" id="diceContainer">
            <!-- 六个骰子，初始可以用空div或占位图 -->
            <div class="dice" data-face="1">⚀</div>
            <div class="dice" data-face="2">⚁</div>
            <div class="dice" data-face="3">⚂</div>
            <div class="dice" data-face="4">⚃</div>
            <div class="dice" data-face="5">⚄</div>
            <div class="dice" data-face="6">⚅</div>
        </div>
        
        <!-- 控制按钮 -->
        <button class="roll-button" id="rollButton">掷骰子</button>
        
        <!-- 结果显示区域 -->
        <div class="result" id="result">
            <p>等待掷骰...</p>
        </div>
        
        <!-- 规则说明 (可选) -->
        <div class="rules">
            <h3>博饼规则</h3>
            <ul>
                <li><strong>状元插金花</strong>: 4个"四点" + 2个"一点"</li>
                <li><strong>状元</strong>: 4个及以上"四点" / 5个及以上相同点数</li>
                <li><strong>对堂</strong>: 点数分别为1、2、3、4、5、6</li>
                <li><strong>四进</strong>: 4个相同的非四点点数</li>
                <li><strong>三红</strong>: 3个"四点"</li>
                <li><strong>二举</strong>: 2个"四点"</li>
                <li><strong>一秀</strong>: 1个"四点"</li>
            </ul>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>